<template>
  <div class="home">
    <van-search custom-class="mk-van-search" background="#F6729C" :value="keywords"  placeholder="年抛 金粉 活动" v-model="keywords" @search="onSearch"></van-search>
    <swiper v-if="banners"  class="swiper" height="100%" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <swiper-item v-for="(item, index) in banners" :index="index" :key="index">
        <image :src="item.image" class="slide-image" mode="widthFix" @click="handleRouter(item)"/>
      </swiper-item>
    </swiper>
    <div class="category-nav" v-if="navMenus">
      <div class="box" v-for="(item, index) in navMenus" :key="index" @click="handleRouter(item)">
        <img :src="item.image"/>
      </div>
    </div>

    <div class="post-nav" v-if="shop" @click="postEntry">
      <img class="bg" src="../../../static/images/post-entry.png">
      <img class="head" :src="shop.user.avatar">
      <div class="title">
        <span class="name">{{shop.user.nickname}}</span>
        <span class="else">的种草推荐</span>
      </div>
    </div>

    <div class="top-section" v-if="topSection&&topSection.length">
      <van-row gutter="10">
        <van-col
          span="12"
          v-for="(item, index) in topSection"
          :key="index"
          @click="handleRouter(item)"
        >
          <image :src="item.image" mode="widthFix" lazy-load="true"/>
        </van-col>
      </van-row>
    </div>

    <div class="hot-section" v-if="hotSection&&hotSection.length">
      <p class="mk-title">限时特卖</p>
      <image :src="hotSection[0].image" mode="widthFix" @click="handleRouter(hotSection[0])"/>
      <div class="hot-section-category" v-if="recommendsIndex&&recommendsIndex.length">
        <div
          class="item"
          v-for="(item, index) in recommendsIndex"
          :key="index"
          @click="goToProduct(item.product.id)"
        >
          <image class="pic-left" mode="aspectFill" :src="item.product.image + '?imageView2/1/w/320/h/320/q/75'" lazy-load="true"/>
          <div class="detail-mid">
            <p class="title">{{item.product.title}}</p>
            <p class="detail">{{item.product.desc || ''}}</p>
            <div class="mk-price">￥{{item.product.price}}</div>
            <button class="btn" size="mini">立即抢购</button>
          </div>
        </div>
      </div>
    </div>
    <div class="recommend-section-category" v-if="blhList&&blhList.length">
      <div class="mk-title">
        伴侣盒推荐
        <button class="btn" @click="handleMore(blhList[0].search_keyword)">更多推荐<van-icon class="icon" name="arrow" color="#7E7E80"/></button>
      </div>
      <van-row>
        <van-col
          span="8"
          v-for="(item, index) in blhList"
          :key="index"
          @click="goToProduct(item.product.id)"
        >
          <div class="card">
            <image mode="aspectFill" :src="item.product.image + '?imageView2/1/w/320/h/320/q/75'" lazy-load="true"/>
            <div class="card-info">
              <p class="head">{{item.product.title}}</p>
              <p class="mk-price">￥{{item.product.price}}</p>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>

    <div class="recommend-section-category" v-if="hlyList&&hlyList.length">
       <div class="mk-title">
        护理液推荐
        <button class="btn" @click="handleMore(hlyList[0].search_keyword)">更多推荐<van-icon class="icon" name="arrow" color="#7E7E80"/></button>
      </div>
      <van-row>
        <van-col
          span="8"
          v-for="(item, index) in hlyList"
          :key="index"
          @click="goToProduct(item.product.id)"
        >
          <div class="card">
            <image mode="aspectFill" :src="item.product.image + '?imageView2/1/w/320/h/320/q/75'" lazy-load="true"/>
            <div class="card-info">
              <p class="head">{{item.product.title}}</p>
              <p class="mk-price">￥{{item.product.price}}</p>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>

      <div class="brand-section" v-for="(item, index) in brandsList" :key="index" >
        <image class="background" mode="widthFix" :src="item.cover + '?imageMogr2/auto-orient/thumbnail/640x/quality/75'"/>
        <div class="content" @click="toBrandtarget(item.brand_id)">
          <image class="logo" :src="item.logo + '?imageView2/1/w/120/h/120/q/75'"/>
          <div class="dec">
            <div class="title">
              <span>{{item.name}}</span>
              <span class="btn">
                查看全部 
                <van-icon name="arrow"  style="top: 2rpx; display: inline-block; position:relative;"/>
              </span>
            </div>
            <div class="intro">{{item.introduction}}</div>
          </div>
        </div>
        <div class="brand-products">
        <van-row>
          <van-col
            span="8"
            v-for="(sitem, idx) in item.products"
            :key="idx"
            @click="goToProduct(sitem.id)"
          >
            <div class="card">
              <image mode="aspectFill" :src="sitem.image + '?imageView2/1/w/320/h/320/q/75'" lazy-load="true"/>
              <div class="card-info">
                <p class="head">{{sitem.title}}</p>
                <p class="mk-price">￥{{sitem.price}}</p>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
      </div>
    <div class="like-section" v-if="likeDatas">
      <div class="mk-title">猜你喜欢</div>
      <div class="list">
        <van-row gutter="10">
          <van-col span="12" v-for="(item,index) in likeDatas" :key="index">
            <div class="box" @click="goToProduct(item.id)">
              <img :src="item.image + '?imageView2/1/w/320/h/320/q/75'"/>
              <span class="t">{{item.title}}</span>
              <span class="mk-price">￥{{item.price}}</span>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <page-footer/>
  </div>
</template>

<script>
import * as OperationAction from '@/api/operation'
import PageFooter from '@/components/page-footer.vue'
import * as ShopAction from '@/api/shop'
import Utils from '@/utils'
import { mapState } from 'vuex'
export default {
  components: {
    PageFooter
  },
  data () {
    return {
      keywords: '',
      banners: null,
      navMenus: null,
      topSection: null,
      hotSection: null,
      hlyList: null,
      blhList: null,
      recommendsIndex: null,
      shop: null,
      posts: null,
      likeDatas: null,
      brandsList: null
    }
  },
  computed: {
    ...mapState(['shop_name']),
    ...mapState(['me']),
    postShow () {
      this.shop = null
      if (this.me && this.me.invite_code) {
        this.$store.commit('set_shop_name', this.me.invite_code)
        this.fetchShop(this.shop_name)
        return false
      }
      if (this.shop_name) {
        this.fetchShop(this.shop_name)
        return false
      }
      if (this.me && this.me.invite_user) {
        this.$store.commit('set_shop_name', this.me.invite_user.invite_code)
        this.fetchShop(this.shop_name)
        return false
      }
      return false
    }
  },
  onLoad (query) {
    wx.showNavigationBarLoading()
    wx.showShareMenu({ withShareTicket: true })
    this.fetchIndex()
    this.fetchBrands()
    this.fetchLikeDatas()
    if (query.scene) {
      let params = Utils.parseQuery(decodeURIComponent(query.scene))
      if (params.ic && params.ic.length === 6) wx.setStorageSync('__inviteCode', params.ic)
      return
    }
    if (query.code) wx.setStorageSync('__inviteCode', query.code)
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.keywords = ''
    this.fetchIndex()
    this.fetchBrands()
    this.fetchLikeDatas()
    wx.stopPullDownRefresh()
  },
  onShareAppMessage (res) {
    return {
      title: this.shareTitle(),
      path: this.sharePath()
    }
  },
  methods: {
    postEntry () {
      wx.navigateTo({ url: '../shop/index?name=' + this.shop_name })
    },
    handleMore (key) {
      wx.navigateTo({ url: '../product/search?title=' + key })
    },
    goToProduct (id) {
      wx.navigateTo({ url: '../product/detail?id=' + id })
    },
    toBrandtarget (id) {
      wx.navigateTo({ url: '../brand/index?id=' + id })
    },
    fetchShop (name) {
      ShopAction.show(name).then(data => {
        this.shop = data
        this.$store.commit('set_shop_name', data.name)
      }).catch(err => console.log(err.msg))
    },
    fetchIndex () {
      OperationAction.initIndex({ p: 'mp' }).then(data => {
        let model = data
        this.banners = model.banners
        this.navMenus = model.nav_menus
        this.topSection = model.top_section
        this.hotSection = model.hot_section
        this.hlyList = model.recommends.hly_list
        this.blhList = model.recommends.blh_list
        this.recommendsIndex = model.recommends.index
        wx.hideNavigationBarLoading()
      }).catch(err => console.log(err.msg))
    },
    onSearch (event) {
      this.keywords = event.mp.detail
      wx.navigateTo({ url: '../product/search?title=' + this.keywords })
      this.keywords = ''
    },
    shareTitle () {
      if (!this.me) return '美控邀您开启美幻之旅'
      if (this.me) return `${this.me.nickname}向您推荐了美控家`
    },
    sharePath () {
      if (!this.me) return '/pages/home/index'
      if (this.me && this.me.invite_code) return '/pages/home/index?code=' + this.me.invite_code
    },
    handleRouter (item) {
      switch (item.open_type) {
        case 'goods-zone':
          wx.navigateTo({
            url: '../product/zone?id=' + item.target
          })
          break
        case 'goods':
          wx.navigateTo({
            url: '../product/detail?id=' + item.target
          })
          break
        case 'placardList':
          wx.navigateTo({
            url: '../placard/list'
          })
          break
        case 'placardDetail':
          wx.navigateTo({
            url: '../placard/detail?id=' + item.target
          })
          break
        case 'goods-search':
          wx.navigateTo({
            url: '../product/search?title=' + item.target
          })
          break
        case 'brand':
          wx.navigateTo({
            url: '../brand/index?id=' + item.target
          })
          break
        case 'category':
          wx.navigateTo({
            url: '../brand/category'
          })
          break
        case 'zy':
          wx.switchTab({
            url: '../home/zy'
          })
          break
      }
    },
    fetchLikeDatas () {
      OperationAction.likeDatas({ limit: 20 }).then(data => {
        this.likeDatas = data
      }).catch(err => console.log(err.msg))
    },
    // 获取品牌相关信息
    fetchBrands () {
      OperationAction.fetchBrands({ is_proprietary: 2 })
        .then(data => {
          this.brandsList = data
        }).catch(err => console.log(err.msg))
    }
  }
}
</script>

<style lang="less" src="./index.less" scoped></style>